<template>
  <div class="px-60px pt-23px w-full h-full">
    <div class="flex items-center">
      <div class="flex items-center bg-mask-3 w-470px h-96px text-white relative">
        <img
          :src="user.GetAvatar"
          alt=""
          class="ml-29px w-52px h-52px rounded-[50%]"
          style="border: 1px solid #fff"
        />
        <div class="ml-7px">
          <div class="text-16px leading-23px">{{ user.GetUserName }}</div>
          <div v-if="!level" class="text-12px leading-18px" style="color: #c5c5c5">
            你还不是会员，开通会员尊享会员权益
          </div>
          <div v-else class="flex items-center">
            <n-icon size="26">
              <svg
                width="26"
                height="14"
                viewBox="0 0 26 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M20.8 0.599609H4.8C3.52696 0.599609 2.30606 1.10532 1.40589 2.0055C0.505713 2.90567 0 4.12657 0 5.39961V8.59961C0 9.22995 0.124156 9.85413 0.365378 10.4365C0.606601 11.0189 0.960166 11.548 1.40589 11.9937C2.30606 12.8939 3.52696 13.3996 4.8 13.3996H20.8C21.4303 13.3996 22.0545 13.2755 22.6369 13.0342C23.2192 12.793 23.7484 12.4394 24.1941 11.9937C24.6398 11.548 24.9934 11.0189 25.2346 10.4365C25.4758 9.85413 25.6 9.22995 25.6 8.59961V5.39961C25.6 4.12657 25.0943 2.90567 24.1941 2.0055C23.2939 1.10532 22.073 0.599609 20.8 0.599609ZM7.848 10.9996H7.76C7.59572 10.9806 7.44135 10.9112 7.31814 10.8009C7.19494 10.6906 7.10894 10.5448 7.072 10.3836L5.616 3.98361C5.59289 3.87855 5.59069 3.76997 5.60954 3.66407C5.6284 3.55816 5.66792 3.457 5.72586 3.36637C5.84289 3.18334 6.02783 3.05429 6.24 3.00761C6.45217 2.96093 6.6742 3.00045 6.85723 3.11747C7.04027 3.2345 7.16932 3.41944 7.216 3.63161L8.128 7.79961L10.248 3.44761C10.2892 3.3456 10.3509 3.25318 10.4294 3.17612C10.5079 3.09905 10.6014 3.039 10.7042 2.99972C10.8069 2.96044 10.9167 2.94277 11.0266 2.94782C11.1364 2.95286 11.2441 2.98051 11.3428 3.02904C11.4415 3.07757 11.5292 3.14594 11.6003 3.22987C11.6714 3.3138 11.7244 3.41149 11.7561 3.51684C11.7877 3.62219 11.7973 3.73294 11.7842 3.84215C11.7711 3.95137 11.7356 4.05672 11.68 4.15161L8.568 10.5516C8.50203 10.6863 8.39955 10.7996 8.27224 10.8789C8.14494 10.9581 7.99794 10.9999 7.848 10.9996ZM13.024 10.3356C12.9916 10.5234 12.8932 10.6935 12.7466 10.8153C12.5999 10.937 12.4146 11.0024 12.224 10.9996C12.1763 11.0075 12.1277 11.0075 12.08 10.9996C11.8726 10.9625 11.6882 10.8451 11.5669 10.6728C11.4456 10.5005 11.3971 10.2874 11.432 10.0796L12.56 3.67961C12.5961 3.46744 12.7149 3.27828 12.8905 3.15376C13.066 3.02923 13.2838 2.97954 13.496 3.01561C13.7082 3.05168 13.8973 3.17056 14.0219 3.34609C14.1464 3.52162 14.1961 3.73944 14.16 3.95161L13.024 10.3356ZM20.272 5.53561C20.1517 6.16119 19.8211 6.72683 19.3351 7.13864C18.8491 7.55046 18.2368 7.78368 17.6 7.79961H16.672L16.224 10.3356C16.1916 10.5234 16.0932 10.6935 15.9466 10.8153C15.7999 10.937 15.6146 11.0024 15.424 10.9996C15.3763 11.0075 15.3277 11.0075 15.28 10.9996C15.0726 10.9625 14.8882 10.8451 14.7669 10.6728C14.6456 10.5005 14.5971 10.2874 14.632 10.0796L15.2 6.87961C15.2289 6.68885 15.3258 6.51497 15.4728 6.39001C15.6198 6.26505 15.8071 6.19743 16 6.19961H17.6C17.8594 6.18334 18.1065 6.08328 18.3042 5.91448C18.5018 5.74568 18.6393 5.51727 18.696 5.26361C18.7164 5.17967 18.7176 5.09224 18.6996 5.00776C18.6816 4.92329 18.6448 4.84395 18.592 4.77561C18.5388 4.7167 18.4731 4.67036 18.3998 4.63992C18.3265 4.60948 18.2473 4.59571 18.168 4.59961H16.568C16.3558 4.59961 16.1523 4.51532 16.0023 4.36529C15.8523 4.21527 15.768 4.01178 15.768 3.79961C15.768 3.58744 15.8523 3.38395 16.0023 3.23392C16.1523 3.08389 16.3558 2.99961 16.568 2.99961H18.168C18.4804 2.99556 18.7899 3.06008 19.0746 3.18863C19.3594 3.31718 19.6124 3.50662 19.816 3.74361C20.0185 3.99077 20.1642 4.27934 20.243 4.58897C20.3218 4.8986 20.3317 5.22174 20.272 5.53561Z"
                  :fill="level.theme"
                />
              </svg>
            </n-icon>
            <div :style="{ color: level.theme }" class="text-12px ml-3px">{{ level.name }}</div>
            <div class="absolute top-0 right-0 w-94px h-87px">
              <n-icon size="94">
                <svg
                  width="94"
                  height="87"
                  viewBox="0 0 94 87"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M58.2733 87H50.5164V49.8306H58.2733V87ZM91.8423 68.9187C89.7738 72.0285 86.5527 73.5686 82.1646 73.5686H73.27V87H65.513V49.8306H82.475C86.0654 49.8306 88.8874 50.8968 90.9265 53.0145C92.9802 55.1321 93.9998 58.0345 93.9998 61.7367C94.0146 64.343 93.2906 66.742 91.8427 68.9188M7.22489 87V7.84847C7.22489 7.52268 6.95888 7.25619 6.63394 7.25619H0.590944C0.265888 7.25619 0 6.98958 0 6.66392V0.592399C0 0.26661 0.26601 0.00012102 0.590944 0.00012102H28.3388C28.6639 0.00012102 28.9297 0.266732 28.9297 0.592399V36.2513L65.1733 0.177658C65.2767 0.0739424 65.4393 0 65.5869 0H92.6107C93.1426 0 93.3937 0.636813 93.0244 1.00702L7.22489 87ZM84.6616 57.4421C83.5978 56.6573 81.8544 56.2575 79.4313 56.2575H73.2701V67.1417H80.4656C82.9479 67.1417 84.6322 66.3865 85.5336 64.876C86.0212 64.0467 86.2576 62.8768 86.2576 61.3664C86.2576 59.5449 85.7257 58.2418 84.6619 57.4421"
                    :fill="level.theme"
                    fill-opacity="0.5"
                  />
                </svg>
              </n-icon>
            </div>
          </div>
          <div v-if="user.level" style="color: #bebebe" class="text-10px">
            有效期至 {{ user.levelTimeout }}
          </div>
        </div>
      </div>
      <div
        v-if="!level || level.name !== levelName"
        class="relative vip-money w-420px h-68px ml-68px cursor-pointer"
        style="color: #613114"
        @click="openLevel"
      >
        <div
          class="w-full h-full absolute z-2 left-0 top-0 flex items-center justify-center"
          :style="{ background: vips[active]?.bg, color: vips[active]?.word }"
        >
          <span class="mr-4px">￥</span>
          <span class="font-bold text-30px">{{ price }}</span>
          <span class="text-24px tracking-wide ml-3px">/年</span>
          <span class="text-24px tracking-wide ml-16px">开通{{ levelName }}</span>
        </div>
        <!-- <div class="w-full h-full absolute left-0 top-0 z-1"><img :src="OpenVipIcon" alt="" /></div> -->
      </div>
    </div>
    <div
      class="flex items-center justify-between"
      style="box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)"
    >
      <div
        v-for="(item, index) in vips"
        :key="item.name"
        class="relative w-200px h-86px flex mt-28px rounded-6px cursor-pointer"
        :style="{
          background: item.bg,
          color: '#4F3E3E',
          'box-shadow': '0px 4px 4px rgba(0, 0, 0, 0.25)',
          border: index === active ? `4px solid ${theme}` : 'none'
        }"
        :class="{
          'w-236px': index === active,
          'h-101px': index === active
        }"
        @click="
          () => {
            active = index
            noScroll = true
            giftWrapper.scrollTo(0, 0)
          }
        "
      >
        <div class="mt-5px ml-5px">
          <img
            :src="item.icon"
            alt=""
            :class="{ 'w-102px h-82px': active === index, 'w-87px h-70px': active !== index }"
          />
        </div>
        <div class="mt-14px ml-8px" :style="{ color: index === 3 ? '#E6C28B' : '#4F3E3E' }">
          <div class="font-medium text-20px">{{ item.name }}</div>
          <div class="text-10px mt-8px">{{ item.en }}</div>
          <div class="w-36px h-2px mt-8px" :style="{ background: item.horizontal }"></div>
        </div>
      </div>
    </div>
    <div class="text-20px mt-22px flex items-center font-medium mb-10px">
      <n-icon size="17">
        <svg
          width="17"
          height="17"
          viewBox="0 0 17 17"
          :fill="theme"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clip-path="url(#clip0_975_4202)">
            <path
              d="M4.25033 1.41602H1.41699L5.31283 15.5827H8.14616L4.25033 1.41602Z"
              :stroke="theme"
              stroke-width="2"
              stroke-linejoin="round"
            />
            <path
              d="M8.14551 15.5827L15.583 1.41602"
              :stroke="theme"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </g>
          <defs>
            <clipPath id="clip0_975_4202">
              <rect width="17" height="17" :fill="theme" />
            </clipPath>
          </defs>
        </svg>
      </n-icon>
      <div :style="{ color: theme }">会员权益</div>
    </div>
    <div class="flex items-center justify-between bg-mask-3 w-full h-140px">
      <div
        v-for="(item, index) in power"
        :key="item.name"
        class="flex flex-col items-center justify-center flex-1"
      >
        <div
          :style="{ background: bg }"
          class="w-63px h-46px rounded-9px flex items-center justify-center relative"
        >
          <img :src="item.innerIcon" alt="" />
          <div
            v-if="index === 0"
            class="w-40px h-40px bg-coupon rounded-[50%] text-14px font-bold text-center leading-40px text-white absolute -top-15px -right-20px"
          >
            {{ discount }}折
          </div>
        </div>
        <div class="text-22px text-white leading-33px">{{ item.name }}</div>
        <div class="text-14px leading-21px mt-5px" style="color: #b3b3b3">
          {{ index === 0 ? `${discount}折` : item.content }}
        </div>
      </div>
    </div>
    <div class="text-20px mt-20px flex items-center font-medium mb-10px">
      <div :style="{ color: theme }">充送优惠</div>
    </div>
    <div><img :src="TotalGiveFee" /></div>
    <div class="text-20px mt-20px flex items-center font-medium mb-10px">
      <div :style="{ color: theme }">超值大礼包</div>
    </div>
    <div><img :src="givefee" /></div>
    <!-- <div ref="giftWrapper" class="flex flex-wrap h-200px overflow-y-auto relative">
      <div
        v-for="(item, index) in vips[active]?.coupons"
        :key="index"
        :class="{ 'mr-174px': index % 2 === 0 }"
        class="mb-15px bg-mask-4 w-390px h-89px px-10px py-10px"
      >
        <div class="flex items-center justify-between">
          <div class="text-20px font-medium text-white">{{ item.type }}</div>
          <div
            v-if="item.single && item.number"
            class="text-24px font-medium"
            :style="{ color: theme }"
          >
            ￥{{ item.single * item.number }}
          </div>
        </div>
        <div class="text-16px mt-16px" style="color: #b3b3b3">{{ item.content }}</div>
      </div>
      <div
        v-if="vips[active]?.coupons.length > 4 && noScroll"
        class="absolute bottom-0 text-14px text-white left-[50%] -ml-46px"
      >
        滑动加载更多
      </div>
    </div> -->
    <!-- <div
      class="flex items-center fixed left-160px pr-60px w-1076px justify-end bottom-10px bg-mask-8 h-60px"
    >
      <n-icon size="34">
        <svg
          width="34"
          height="34"
          viewBox="0 0 34 34"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M29.0418 31.166V14.166H4.9585V31.166H29.0418Z"
            :stroke="theme"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M17 31.166V14.166"
            :stroke="theme"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M29.0418 31.166H4.9585"
            :stroke="theme"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M31.1668 8.5H2.8335V14.1667H31.1668V8.5Z"
            :stroke="theme"
            stroke-width="2"
            stroke-linejoin="round"
          />
          <path
            d="M11.3335 2.83398L17.0002 8.50065L22.6668 2.83398"
            :stroke="theme"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </n-icon>
      <div class="text-28px text-white font-medium ml-8px">礼包总金额:</div>
      <div class="text-30px" :style="{ color: theme }">￥{{ total }}</div>
    </div> -->
    <open
      v-if="showModal"
      v-model:value="showModal"
      :level="vips[active]"
      @open-success="openSuccess"
    />
    <open-success-modal v-model:value="showOpenSuccessModal" :name="levelName" />
    <n-modal :show="showIDCard">
      <div class="bg-white px-20px py-20px rounded-6px w-300px">
        <n-form ref="formRef" :model="modelRef">
          <n-form-item path="password" label="身份证后六号">
            <n-input v-model:value="modelRef.password" />
          </n-form-item>
          <n-form-item
            ref="rPasswordFormItemRef"
            first
            path="reenteredPassword"
            label="重复身份证号"
          >
            <n-input v-model:value="modelRef.reenteredPassword" :disabled="!modelRef.password" />
          </n-form-item>
          <div class="color-secondary -mt-15px text-12px">
            须知：身份证号仅用于万象系统管理会员使用，云游不用做其它任何用途。<span
              class="color-coupon"
              >请确保使用本人身份证，避免自身利益受损。</span
            >
          </div>
          <div class="flex items-center w-full mt-20px">
            <div
              class="flex-1 h-40px rounded-16px bg-main text-white text-16px font-medium text-center leading-40px cursor-pointer"
              @click="handleValidateButtonClick"
            >
              验证
            </div>
          </div>
        </n-form>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@renderer/store/modules/user'
import Open from './open.vue'
import OpenSuccessModal from './openSuccess.vue'
import { useContextStore } from '@renderer/store/modules/context'
import { NModal, NForm, NFormItem, useMessage } from 'naive-ui'
// import VipIndex from '@renderer/assets/vipIndex.jpg'
import MGive from '@renderer/assets/mgive.jpg'
import GGive from '@renderer/assets/goldgive.jpg'
import PGive from '@renderer/assets/pgive.jpeg'
import KGive from '@renderer/assets/kgive.jpg'
import TotalGiveFee from '@renderer/assets/totalgivefee.jpg'

const showModal = ref<boolean>(false)
const showOpenSuccessModal = ref<boolean>(false)
const context = useContextStore()

const message = useMessage()

const user = useUserStore()

const active = ref<number>(user.level ? user.level - 1 : 2)
const showIDCard = ref<boolean>(false)

const formRef = ref(null)
const rPasswordFormItemRef = ref(null)
const modelRef = ref({
  password: null,
  reenteredPassword: null
})
const handleValidateButtonClick = () => {
  const { password, reenteredPassword } = modelRef.value
  if (password !== reenteredPassword) {
    return message.error('请保持输入两次输入一致！')
  }
  if (!password) {
    return message.error('请输入身份证号！')
  }
  showIDCard.value = false
  modelRef.value = {
    password: null,
    reenteredPassword: null
  }
  showOpenSuccessModal.value = true
  return user.openLevel(
    vips.value[active.value].id,
    levelName.value,
    context.store_name,
    context.no,
    password
  )
}

const theme = computed(() => {
  return vips.value[active.value]?.theme
})

const bg = computed(() => {
  return vips.value[active.value]?.bg
})

const price = computed(() => {
  return vips.value[active.value]?.price
})

const discount = computed(() => {
  return vips.value[active.value]?.discount
})

const levelName = computed(() => {
  return vips.value[active.value]?.name
})

const total = computed(() => {
  const coupons = vips.value[active.value]?.coupons || []
  return coupons.reduce((prev, cur) => {
    if (cur.single && cur.number) {
      prev += cur.single * cur.number
    }
    return prev
  }, 0)
})

const giftWrapper = ref<any>(null)

const level = computed(() => {
  // @todo
  if (!user.level) {
    return
  }
  return vips.value.find((vip) => vip.id === user.level)
})

const power = computed(() => user.powerInfo)

const vips = computed(() => user.vipInfo)

const givefee = computed(() => {
  console.log(active.value)
  if (active.value === 0) {
    return GGive
  }
  if (active.value === 1) {
    return PGive
  }
  if (active.value === 2) {
    return MGive
  }
  return KGive
})

// 开通会员
const openLevel = () => {
  showModal.value = true
}

const openSuccess = () => {
  showModal.value = false
  showIDCard.value = true
  // user.openLevel(vips.value[active.value].id, levelName.value, context.store_name, context.no)
}

const noScroll = ref<boolean>(true)

function onMouseWheel(ev) {
  /*当鼠标滚轮事件发生时，执行一些操作*/
  ev = ev || window.event
  let down = true // 定义一个标志，当滚轮向下滚时，执行一些操作
  down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0
  if (down) {
    noScroll.value = false
  } else {
    console.log('鼠标滚轮向上++++++++++')
  }
}
onMounted(async () => {
  await user.getLevelList()
  await user.setLevel()
  giftWrapper.value.addEventListener('mousewheel', onMouseWheel)
  giftWrapper.value.addEventListener('DOMMouseScroll', onMouseWheel)
})
</script>

<style scoped>
.vip-money {
  /* background: url('@renderer/assets/openVip.svg'); */
  background-color: #f5dc99;
}
.invisible-scrollbar::-webkit-scrollbar {
  /* width: 1px;
  height: 3px; */
  /* display: block; */
  background: #e6e6e6;
  width: 2px;
  display: inline;
}
/* .invisible-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e6e6e6;
  display: block;
} */
</style>
